<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<c:set var="url_context" value="${pageContext.request.contextPath}" scope="application" />
<c:set var="url_style" value="${url_context}/styles" scope="application" />
<c:set var="url_script_lib" value="${url_context}/script/js-libraries" scope="application" />

<html>

	<head>
		
		<link rel="stylesheet" type="text/css" href="${url_style}/iris-all.css" />
		<script type="text/javascript" src="${url_script_lib}/jquery-1.7.2.js"></script>
		
	</head>
	
	<body class="tinybox">
		
		<div class="wrapper">
			<c:if test="${param.formsubmitsuccess}">
				<div class="success-message">Your changes has been saved</div>
			</c:if>
			
			<h2><span class="first-letter">C</span>hange your <span class="first-letter">P</span>rofile <span class="first-letter">P</span>icture</h2>
			<div class="hr"></div>
			<br/>
			
			<form:form class="photo-upload" enctype="multipart/form-data" method="POST" commandName="user" action="${url_context}/upload-user-photo.jspx?userId=${user.id}">
				
				<spring:bind path="user.*">
					<c:if test="${status.error}">
						<div class='errorBox'>
							<form:errors path="*" />
			            </div>
					</c:if>
				</spring:bind>
				
				<img class="preview-image" height="100" width="100" src="${url_context}/user-image.jspx?userId=${user.id}&imageSize=thumb" />
			
				<input type="file" id="photo" name="photo" accept="image/*" required/>
				
				<div class="note">Profile image must be at least 250 x 250 pixels and must not exceed 10Mb</div>
				
				<input type="submit" value="Upload"/>
				
			</form:form>
		</div>
		<script>
		$(document).ready(function() {
			window.parent.jQuery('.tclose').click(function() {
				window.parent.location.reload();
			});
		});
		</script>
	</body>

</html>